<template>
  <view class="staff-select-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" color="#fff" size="20"></u-icon>
      </view>
      <text class="header-title">选择人员</text>
      <view class="header-right" @click="confirmSelection">
        <text class="confirm-text">确定({{ selectedStaff.length }})</text>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-section">
      <u-search
        v-model="searchKeyword"
        placeholder="搜索人员姓名或工号"
        @search="handleSearch"
        @clear="handleClear"
      ></u-search>
    </view>

    <!-- 筛选条件 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="tab in filterTabs" 
          :key="tab.key"
          class="filter-tab"
          :class="{ active: currentFilter === tab.key }"
          @click="switchFilter(tab.key)"
        >
          <text class="tab-text">{{ tab.text }}</text>
        </view>
      </view>
    </view>

    <!-- 人员列表 -->
    <view class="staff-list">
      <view 
        v-for="staff in filteredStaff" 
        :key="staff.id"
        class="staff-item"
        @click="toggleStaff(staff)"
      >
        <view class="staff-avatar">
          <u-avatar 
            :src="staff.avatar" 
            :text="staff.name.charAt(0)"
            size="60"
          ></u-avatar>
        </view>
        
        <view class="staff-info">
          <text class="staff-name">{{ staff.name }}</text>
          <text class="staff-role">{{ staff.role }}</text>
          <text class="staff-department">{{ staff.propertyCompanyName || '暂无物业公司' }}</text>
          <text class="staff-status" :class="staff.statusClass">{{ staff.statusText }}</text>
        </view>
        
        <view class="staff-actions">
          <u-checkbox 
            v-model="staff.selected"
            @change="toggleStaff(staff)"
          ></u-checkbox>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredStaff.length === 0" class="empty-state">
      <u-icon name="account" color="#ccc" size="80"></u-icon>
      <text class="empty-text">暂无人员数据</text>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="selected-info">
        <text class="selected-count">已选择 {{ selectedStaff.length }} 人</text>
        <u-button 
          type="text" 
          text="全选" 
          @click="selectAll"
        ></u-button>
        <u-button 
          type="text" 
          text="清空" 
          @click="clearAll"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 人员选择页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 响应式数据
const searchKeyword = ref('')
const currentFilter = ref('all')
const selectedStaff = ref([])

// 筛选标签
const filterTabs = ref([
  { key: 'all', text: '全部' },
  { key: 'online', text: '在职' },
  { key: 'offline', text: '离职' },
  { key: 'cleaning', text: '保洁部' },
  { key: 'security', text: '安保部' },
  { key: 'maintenance', text: '维修部' }
])

// 人员数据
const staffList = ref([
  {
    id: 1,
    name: '张三',
    role: '保洁员',
    department: '保洁部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 2,
    name: '李四',
    role: '保洁员',
    department: '保洁部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 3,
    name: '王五',
    role: '安保员',
    department: '安保部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 4,
    name: '赵六',
    role: '维修员',
    department: '维修部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 5,
    name: '钱七',
    role: '保洁员',
    department: '保洁部',
    status: 'offline',
    statusText: '离职',
    statusClass: 'offline',
    avatar: '',
    selected: false
  },
  {
    id: 6,
    name: '孙八',
    role: '安保员',
    department: '安保部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 7,
    name: '周九',
    role: '维修员',
    department: '维修部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  },
  {
    id: 8,
    name: '吴十',
    role: '客服员',
    department: '客服部',
    status: 'online',
    statusText: '在职',
    statusClass: 'online',
    avatar: '',
    selected: false
  }
])

// 计算属性
const filteredStaff = computed(() => {
  let filtered = staffList.value

  // 按关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(staff => 
      staff.name.toLowerCase().includes(keyword) ||
      staff.role.toLowerCase().includes(keyword) ||
      staff.department.toLowerCase().includes(keyword)
    )
  }

  // 按筛选条件过滤
  switch (currentFilter.value) {
    case 'online':
      filtered = filtered.filter(staff => staff.status === 'online')
      break
    case 'offline':
      filtered = filtered.filter(staff => staff.status === 'offline')
      break
    case 'cleaning':
      filtered = filtered.filter(staff => staff.department === '保洁部')
      break
    case 'security':
      filtered = filtered.filter(staff => staff.department === '安保部')
      break
    case 'maintenance':
      filtered = filtered.filter(staff => staff.department === '维修部')
      break
  }

  return filtered
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const confirmSelection = () => {
  if (selectedStaff.value.length === 0) {
    uni.showToast({
      title: '请至少选择一名人员',
      icon: 'none'
    })
    return
  }

  // 将选中的人员信息传递给上一页
  const pages = getCurrentPages()
  const prevPage = pages[pages.length - 2]
  
  if (prevPage && prevPage.$vm) {
    // 根据页面类型设置不同的数据
    if (prevPage.route.includes('schedule-create')) {
      prevPage.$vm.selectedStaff = selectedStaff.value
    } else if (prevPage.route.includes('schedule-batch')) {
      prevPage.$vm.selectedStaff = selectedStaff.value
    }
  }

  uni.showToast({
    title: `已选择 ${selectedStaff.value.length} 名人员`,
    icon: 'success'
  })

  setTimeout(() => {
    goBack()
  }, 1000)
}

const handleSearch = (keyword) => {
  searchKeyword.value = keyword
}

const handleClear = () => {
  searchKeyword.value = ''
}

const switchFilter = (filterKey) => {
  currentFilter.value = filterKey
}

const toggleStaff = (staff) => {
  staff.selected = !staff.selected
  
  if (staff.selected) {
    if (!selectedStaff.value.find(s => s.id === staff.id)) {
      selectedStaff.value.push(staff)
    }
  } else {
    const index = selectedStaff.value.findIndex(s => s.id === staff.id)
    if (index > -1) {
      selectedStaff.value.splice(index, 1)
    }
  }
}

const selectAll = () => {
  filteredStaff.value.forEach(staff => {
    staff.selected = true
    if (!selectedStaff.value.find(s => s.id === staff.id)) {
      selectedStaff.value.push(staff)
    }
  })
  
  uni.showToast({
    title: `已全选 ${filteredStaff.value.length} 名人员`,
    icon: 'success'
  })
}

const clearAll = () => {
  staffList.value.forEach(staff => {
    staff.selected = false
  })
  selectedStaff.value = []
  
  uni.showToast({
    title: '已清空选择',
    icon: 'success'
  })
}

onMounted(() => {
  // 页面加载时初始化数据
  console.log('人员选择页面加载完成')
})
</script>

<style scoped>
.staff-select-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.header-left, .header-right {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
}

.confirm-text {
  font-size: 28rpx;
  color: #fff;
}

.search-section {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.filter-section {
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.filter-tabs {
  display: flex;
  padding: 0 30rpx;
}

.filter-tab {
  flex: 1;
  padding: 30rpx 0;
  text-align: center;
  border-bottom: 4rpx solid transparent;
}

.filter-tab.active {
  border-bottom-color: #667eea;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
}

.filter-tab.active .tab-text {
  color: #667eea;
  font-weight: bold;
}

.staff-list {
  padding: 30rpx;
}

.staff-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.staff-avatar {
  margin-right: 30rpx;
}

.staff-info {
  flex: 1;
}

.staff-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
}

.staff-role {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 4rpx;
}

.staff-department {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}

.staff-status {
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  display: inline-block;
}

.staff-status.online {
  background-color: #e8f5e8;
  color: #52c41a;
}

.staff-status.offline {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.staff-actions {
  margin-left: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.selected-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selected-count {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
</style>
